//初始化
function $(id) { return document.getElementById(id) };
function custom_init() {
    var w = document.body.clientWidth - 20;
    var h = w;
    if (w > 800) { w = 800; h = 300; }
    var parents = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7'];
    for (var i = 0; i < parents.length; i++) {
        var p = $(parents[i]);
        var c = document.createElement('canvas');
        p.id = ''; c.id = parents[i];
        c.width = w; c.height = h;
        p.appendChild(c);
    }
}
custom_init();
var c1 = new fabric.Canvas('c1');
var c2 = new fabric.Canvas('c2');
var c3 = new fabric.Canvas('c3');
var c4 = new fabric.Canvas('c4');
var c5 = new fabric.Canvas('c5');
var c6 = new fabric.Canvas('c6');
var c7 = new fabric.Canvas('c7');
//选框样式
c1.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 100
}));
c1.selectionColor = 'rgba(0, 255, 0, 0.3)';
c1.selectionBorderColor = 'red';
c1.selectionLineWidth = 5;
//个别手柄样式
c2.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 50
}));
c2.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 6,
    transparentCorners: false
});
c2.setActiveObject(c2.item(0));
//透明
c2.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 150
}));
c2.item(1).set({
    borderColor: 'gray',
    cornerColor: 'black',
    cornerSize: 12,
    transparentCorners: true
});
//无框
c2.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 250
}));
c2.item(2).hasBorders = false;
//无块
c2.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 20, left: 100
}));
c2.item(3).hasControls = false;
//全无，拖放，鼠标
c3.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 50
}));
c3.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 100, left: 150
}));
c3.item(0).hasControls = c3.item(0).hasBorders = false;
c3.on({
    'mouse:down': function (e) {
        if (e.target) {
            e.target.opacity = 0.5;
            c3.renderAll();
        }
    },
    'mouse:up': function (e) {
        if (e.target) {
            e.target.opacity = 1;
            c3.renderAll();
        }
    },
    'object:moved': function (e) {
        e.target.opacity = 0.5;
    },
    'object:modified': function (e) {
        e.target.opacity = 1;
    }
});
c3.item(1).hoverCursor = 'pointer';
//拖移时的动画
c4.add(new fabric.Rect({
    left: 50, top: 50, fill: '#77f', width: 40, height: 40
}));
c4.add(new fabric.Rect({
    left: 110, top: 110, fill: '#f0f', width: 50, height: 50
}));
c4.forEachObject(function (o) {
    o.hasBorders = o.hasControls = false;
});
c4.hoverCursor = 'pointer';
function custom_animate(e, dir) {
    if (e.target) {
        fabric.util.animate({
            startValue: e.target.get('angle'),
            endValue: e.target.get('angle') + (dir ? 10 : -10),
            duration: 100,
            onChange: function (value) {
                e.target.setAngle(value);
                c4.renderAll();
            },
            onComplete: function () {
                e.target.setCoords();
            }
        });
        fabric.util.animate({
            startValue: e.target.get('scaleX'),
            endValue: e.target.get('scaleX') + (dir ? 0.2 : -0.2),
            duration: 100,
            onChange: function (value) {
                e.target.scale(value);
                c4.renderAll();
            },
            onComplete: function () {
                e.target.setCoords();
            }
        });
    }
}
c4.on('mouse:down', function (e) { custom_animate(e, 1); });
c4.on('mouse:up', function (e) { custom_animate(e, 0); });
//禁止组选，不可选，背景色
c5.add(new fabric.Rect({
    left: 50, top: 50, fill: '#77f', width: 40, height: 40
}));
c5.add(new fabric.Rect({
    left: 110, top: 110, fill: '#f0f', width: 50, height: 50
}));
c5.add(new fabric.Circle({
    radius: 30, fill: '#f55', top: 50, left: 200
}));
c5.selection = false;
c5.item(1).selectable = false;
c5.backgroundColor = 'rgba(0, 255, 0, 0.3)';
//图背景，图遮罩，禁旋转
c6.add(new fabric.Circle({
    radius: 70, fill: '#f55', top: 50, left: 250
}));
c6.setBackgroundImage('imgs/fox1.jpg', c6.renderAll.bind(c6),
    { left: -150 });
c6.setOverlayImage('imgs/mask1.png', c6.renderAll.bind(c6),
    { left: 150, top: 50, });
c6.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    transparentCorners: false,
    lockRotation: true
});
//禁缩放，忽略 X轴移动，无旋转手柄
c7.add(new fabric.Rect({
    width: 50, height: 50, fill: '#77f', top: 100, left: 50
}));
c7.add(new fabric.Rect({
    width: 50, height: 50, fill: '#7f7', top: 100, left: 150
}));
c7.add(new fabric.Circle({
    radius: 40, fill: '#f55', top: 180, left: 100,
    scaleY: 0.5, flipY: true
}));
c7.item(0).lockScalingX = c7.item(0).lockScalingY = true;
c7.item(1).lockMovementX = true;
c7.item(2).hasRotatingPoint = false;